<template>
	<view class="main">
		<view class="form-box">
			<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoadList">
				<view v-for="item, index in list" :key="index" class="list-card" :class="item.selected?'selected':''"
					@click="handleSelect(item)">
					<view class="list-card-header">
						<view>
							<van-tag v-if="item.isOccupy=='1'" plain size="large" type="danger">已占用</van-tag>
							<van-tag v-else plain size="large" type="success">未使用</van-tag>
						</view>
					</view>
					<view class="list-card-content">
						<text>{{item.meetName}}(房间号: {{item.meetId}})</text>
						<view class="list-card-content-desc">
							<p><span>会议场地：</span>{{item.site}}</p>
							<p><span>会议室容量：</span>{{item.numPeople}}人</p>
							<p><span>开放时间：</span>{{item.beginTime}}~{{item.endTime}}</p>
						</view>
					</view>
				</view>
			</van-list>
		</view>
		<view class="footer">
			<van-button block color="#2D75D7" @click="onSubmit">
				确定
			</van-button>
		</view>
	</view>
</template>

<script>
	import {
		roomList
	} from '../../../api'
	export default {
		data() {
			return {
				loading: false,
				finished: false,
				list: [],
				params: {
					beginTimeConditionChoose: '',
					endTimeConditionChoose: '',
					status: 1
				}
			}
		},
		onLoad(e) {
			
			this.params = {
				...e,
				status: 1
			}
		},
		methods: {
			onLoadList() {
				console.log(this.params);
				roomList(this.params).then(res => {
					console.log(res);
					this.list = res.data.rows.map(e => {
						return {
							...e,
							selected: false
						}
					})
					this.loading = false
					this.finished = true
				})
			},
			onSubmit() {
				if (this.list.every(e => !e.selected)) {
					return uni.showToast({
						icon: 'none',
						title: '请选择会议室'
					})
				}
				console.log(this.list.filter(e => e.selected))
				const item = this.list.filter(e => e.selected)[0]
				uni.redirectTo({
					url: `/pages/meeting/apply/index?meetName=${item.meetName}&meetingId=${item.id}`
				})
			},
			handleSelect(item) {
				if (item.isOccupy == '1') {
					return uni.showToast({
						icon: 'none',
						title: '该会议室已被占用'
					})
				}
				this.list.forEach(e => e.selected = false)
				item.selected = !item.selected
				console.log('click', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.form-box {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 10px;
		margin-bottom: 0;
		border-bottom: 0;
		min-height: 0;

		::v-deep .van-list__placeholder {
			height: 100px;
		}
	}

	.list-card {
		background-color: #fff;
		margin: 15px;
		padding: 15px;
		border-radius: 5px;

		&-header {
			display: flex;
			flex-direction: row-reverse;
		}

		&-content {
			text {
				font-size: 18px;
				font-weight: bold;
				padding-bottom: 10px;
			}

			&-desc {
				display: flex;
				justify-content: space-between;
				flex-direction: row;
				flex-wrap: wrap;
				width: 90%;
				margin-top: 13px;

				p {
					line-height: 26px;
					font-size: 14px;

					span {
						color: #999999;
					}
				}
			}
		}

		&-footer {
			display: flex;
			flex-direction: row-reverse;

			&-button {
				height: 26px;
				width: 80px;
				margin-left: 10px;
			}
		}
	}

	.fixed {
		position: fixed;
		bottom: 60px;
		right: 20px;

		&-button {
			color: white;
			background: rgb(45, 117, 215);
			border-color: rgb(45, 117, 215);
			box-shadow: 3px 3px 5px black;
			height: 60px;
			width: 60px;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 95%;
		padding: 10px;
		display: flex;
		justify-content: center;

		::v-deep .van-button--block {
			width: 48%;
		}
	}

	.selected {
		border: 1px solid #2D75D7;
	}
</style>